<template>
    <el-dialog
      :model-value="dialogVisible"
      title="修改用户"
      width="500"
      :before-close="handleClose"
    >
      <el-form
        ref="formRef"
        :model="form"
        label-width="70px"
        @submit.prevent="handleConfirm"
      >
        <el-form-item label="用户序号" >
          <!-- <el-input v-model="form.id" :span="8" /> -->
           <span>{{form.id}}</span>
        </el-form-item>
        <el-form-item label="账号">
          <el-input placeholder="Please input" v-model="form.userId" :span="8"></el-input>
        </el-form-item>
        <el-form-item label="用户昵称">
          <el-input placeholder="Please input" v-model="form.userName" :span="8"></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="form.email" :span="8" default="111111" />
        </el-form-item><el-form-item label="手机号">
          <el-input v-model="form.phoneNumber" :span="8" />
        </el-form-item>
        <el-form-item label="年龄">
          <el-input v-model="form.age" :span="8" />
        </el-form-item>
        <el-form-item style="margin-left: -68px">
          <el-text style="padding-right: 12px">用户身份</el-text>
          <el-select
            v-model="form.permissionName"
            placeholder="Select"
            style="width: 398px; height: 32px"
          >
            <el-option
              v-for="(item, index) in options"
              :key="index"
              :label="item.label"
              :value="item.value"
              :disabled="item.disabled"
            />
          </el-select>
        </el-form-item>
        <el-text class="mx-1" type="info">
          修改时间：{{ formatDateTime(new Date()) }}
        </el-text>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleClose">取消</el-button>
          <el-button type="primary" @click="handleConfirm">确认</el-button>
        </div>
      </template>
    </el-dialog>
  </template>
  
  <script lang="ts" setup>
  import { defineEmits, ref, reactive } from 'vue'
  import { reqUpdateUser } from '@/api/user/userInfo'
  import type { UserInfo } from '@/api/user/userInfo'
  import { formatDateTime } from '@/utils/formatDate'
  import { options } from './options'
import $bus from '@/bus'
  
  const dialogVisible = ref(false)
let form = reactive<UserInfo>({
    id: 11,
    userId: '',
    passWord: '',
    userName: '',
    permissionId: '',
    permissionName: '',
    email: '',
    phoneNumber: '',
    age: 19,
    isDeleted:0,
    creationTime: '',
  })

  $bus.on('sendUserInfo', ({ row }) => {
		form = row
	})
  
  const formRef = ref(null)
  const emits = defineEmits(['update:modelValue', 'form-submitted'])
  
  const handleConfirm = () => {
    reqUpdateUser(form)
    handleClose()
  }
  const handleClose = () => {
    emits('update:modelValue', false)
  }
  </script>
  <style>
  .el-input {
    width: 398px;
    height: 30px;
  }
  .el-select{
    width: 398px;
    height: 30px;
  }
  </style>